import React,{Component} from 'react';
import axios from 'axios'
import {HashRouter as Router,Route,NavLink,Redirect,Switch,WithRouter, withRouter} from 'react-router-dom'
import loadable from '../util/loadable'
class Home extends Component{
    constructor(){
        super();
        this.state={
            list:[],
            imglist:[]
        }
    }
    componentDidMount(){
        axios.get('/data.json').then((res)=>{
            this.setState({
                list:res.data.data,
                imglist:res.data.dataimg
            },()=>{
            })
        })
    }
    dian=(id)=>{
        this.props.history.push({pathname:`/xq/${id}`})
    }
    render(){
        const {list,imglist} = this.state
        return(
            <div className="nei">   
                <div className="neiOne">
                {
                    list.map((item)=>{
                        return <dl key={item.id}>
                                    <dt> <img src={item.img}/> </dt>
                                    <dd>{item.name}</dd>
                                </dl>
                    })
                }
                </div>
                <div className="neiTwo">
                    <img src="/img/16.png"/>
                </div>
                <div className="neiThree">
                    {
                        imglist.map((item)=>{
                            return <div className="neiThree-img" key={item.id} >
                                         <img src={item.img} onClick={()=>this.dian(item.id)}/>
                                   </div>
                        })
                    }
                </div>
            </div>
        )
    }
}
export default withRouter(Home)